<template>
	<view class="navbar"
		:style="{'position':isFixed?'fixed':'sticky',height: phoneInfo.statusBarHeight + 5  + 45 +'px'}">
		<view class="background"
			:style="{'opacity':isOpacity != false ? opacity :'',height: phoneInfo.statusBarHeight + 5  + 45 +'px'}">
		</view>
		<!-- <view class="background"></view> -->
		<image :src="avatar" mode="aspectFill" class="avatar" v-if="!avatar.includes('avatar')"></image>
		<view class="back-arrow" v-if="isBack" @tap='pageBack'></view>
		<view class="title"><text class="title-text">{{title}}</text></view>
		<view class="opBtn">
			<slot name="opBtn"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navbarNvue",
		props: {
			//标题
			title: {
				type: String,
				default: ""
			},
			//是否需要返回按钮
			isBack: {
				type: Boolean,
				default: false
			},
			//头像
			avatar: {
				type: String,
				default: 'http://www.auok.ltd/avatar.jpg'
			},
			//是否需要透明度
			isOpacity: {
				type: Boolean,
				default: false
			},
			//传入的透明度
			opacity: {
				type: Number,
				default: 0
			},
			isFixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		computed: {
			phoneInfo() {
				// console.log(this.$store.state.phoneInfo)
				return this.$store.state.phoneInfo
			}
		},
		methods: {
			pageBack() {
				console.log('6666')
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style lang="scss">
	.background {
		position: absolute;
		// height: 150rpx;
		width: 60rpx;
		width: 750rpx;
		// top: 666rpx; 
		// border: 10px solid red;
		// z-index: 111;
		background-image: linear-gradient(to right, #59cf5d, #f9f96d);
	}

	.navbar {
		height: 150rpx;
		top: 0;
		left: 0;
		right: 0;
		position: sticky;
		z-index: 5;
		justify-content: center;
		align-items: center;
		// border: 1px solid;
		// background-image: linear-gradient(to right, #59cf5d, #f9f96d);


	}

	.title {
		font-size: 34rpx;
		// border: 1px solid;
		// margin-top: 40rpx;
		bottom: -35rpx;

	}

	.title-text {
		color: #fff;
		text-align: center;
		font-size: 34rpx;

	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		position: absolute;
		bottom: 10rpx;
		left: 50rpx;
		border-radius: 50%;
		border: 1.5px solid rgba(255, 255, 255, .5);

	}

	.back-arrow {
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		height: 25rpx;
		width: 25rpx;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		transform: rotateZ(-45deg);
	}

	.opBtn {
		// border: 1px solid;
		position: absolute;
		right: 30rpx;
		bottom: 15rpx;
		// max-width: 200rpx;
	}
</style>
